<as-split #mySplit direction="horizontal" unit="pixel" gutterSize='4'>
    <as-split-area [size]='300' [minSize]='200' [maxSize]='400' [order]='0'>
        <app-host-tree #hostTree (onClick)="onHostTreeClick($event)" (onDblClick)="onHostTreeDblClick($event)" (onContextMenu)="onHostTreeRightClick($event, menuHostOper)"></app-host-tree>
        <nz-dropdown-menu #menuHostOper="nzDropdownMenu">
            <ul nz-menu>
                <li nz-menu-item (click)="onOperation('edit', rightClickHost)"><i nz-icon nzType="edit"></i>Edit</li>
                <li nz-menu-item (click)="deleteHostFromTree(rightClickHost)"><i nz-icon nzType="delete"></i>Delete</li>
                <li nz-menu-item (click)="onOperation('copy', rightClickHost)" *ngIf="hostCfg.isHost(rightClickHost)"><i nz-icon nzType="copy"></i>Copy</li>
                <li nz-menu-divider *ngIf="hostCfg.isHost(rightClickHost)"></li>
                <li nz-menu-item (click)="onOperation('ssh', rightClickHost)" *ngIf="hostCfg.isNotForward(rightClickHost)"><i nz-icon [nzType]="hostCfg.getIconByType('ssh') "></i>Open SSH</li>
                <li nz-menu-item (click)="onOperation('sftp', rightClickHost)" *ngIf="hostCfg.isNotForward(rightClickHost)"><i nz-icon [nzType]="hostCfg.getIconByType('sftp') "></i>Open SFTP</li>
                <li nz-menu-item (click)="onOperation('forward', rightClickHost)" *ngIf="hostCfg.isForward(rightClickHost)"><i nz-icon [nzType]="hostCfg.getIconByType('forward') "></i>Forwarding</li>
            </ul>
        </nz-dropdown-menu>
    </as-split-area>
    <as-split-area [order]='1'>
        <div class='host-view'>
            <div class='host-header'>
                <div style="display: flex;">
                    <button nz-button nzType="primary" (click)="toggleCollapsed()">
                        <i nz-icon [nzType]="isShowHostTree ? 'menu-fold' : 'menu-unfold'"></i>
                    </button>
                    <nz-breadcrumb>
                        <nz-breadcrumb-item *ngFor='let group of grouplist; let i=index'>
                            <a (click)="changeGroup(i)">{{group.title}}</a>
                        </nz-breadcrumb-item>
                    </nz-breadcrumb>
                </div>
                <div>
                    <button nz-button (click)="ExportConfig()">
                        <i nz-icon nzType="export"></i>Export
                    </button>
                    <button nz-button (click)="ImportConfig()">
                        <i nz-icon nzType="import"></i>Import
                    </button>
                </div>
                <!--nz-switch [(ngModel)]="showAllSub" nzCheckedChildren="All" nzUnCheckedChildren="Child" (ngModelChange)="refresh(this.baseHost)"></nz-switch-->
            </div>
            <div class='host-content' #content>
                <nz-card nzType="inner" nzTitle="Group" [nzExtra]="groupExtraTemplate">
                    <div class='host-list'>
                        <app-hostcard *ngFor='let group of groups; let i=index' [host]='group' [ngStyle]="{'width':cardWidth+'px'}" [ngClass]="{'selected':group.selected}" (onSelect)="onCardSelected(group)" (hostOperation)="onOperation($event, group)">
                        </app-hostcard>
                    </div>
                    <ng-template #groupExtraTemplate>
                        <button nz-button [disabled]="hostCfg.isHost(baseHost)" (click)="openEditDrawer('Group')"><i nz-icon nzType='plus'></i>Add</button>
                    </ng-template>
                </nz-card>
                <br/>
                <nz-card nzType="inner" nzTitle="Host" [nzExtra]="hostExtraTemplate">
                    <div class='host-list'>
                        <app-hostcard *ngFor='let host of hosts; let i=index' [host]='host' [ngStyle]="{'width':cardWidth+'px'}" [ngClass]="{'selected':host.selected}" (onSelect)="onCardSelected(host)" (hostOperation)="onOperation($event, host)">
                        </app-hostcard>
                    </div>
                    <ng-template #hostExtraTemplate>
                        <button nz-button [disabled]="hostCfg.isForward(baseHost)" *ngIf="templateHost" (click)="openEditDrawer('Host', templateHost)"><i nz-icon nzType='copy'></i>Paste</button>
                        <button nz-button [disabled]="hostCfg.isForward(baseHost)" (click)="openEditDrawer('Host')"><i nz-icon nzType='plus'></i>Add</button>
                    </ng-template>
                </nz-card>
                <nz-drawer [nzClosable]="true" [nzWidth]="600" [nzVisible]="isEditing" nzPlacement="right" [nzTitle]="editTitle" [nzFooter]="footerTpl" (nzOnClose)="closeEditDrawer()">
                    <ng-container *nzDrawerContent>
                        <form nz-form [formGroup]="validateForm" spellcheck="false">
                            <nz-form-item>
                                <nz-form-label [nzSpan]="7" nzRequired>Alias</nz-form-label>
                                <nz-form-control [nzSpan]="12" nzHasFeedback>
                                    <input nz-input formControlName="title" placeholder="Host Alias" />
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost)">
                                <nz-form-label [nzSpan]="7" nzRequired>HostIP</nz-form-label>
                                <nz-form-control [nzSpan]="12" nzHasFeedback>
                                    <input nz-input formControlName="ip" placeholder="Host IP Address" />
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost)">
                                <nz-form-label [nzSpan]="7" nzRequired>Port</nz-form-label>
                                <nz-form-control [nzSpan]="12" nzHasFeedback>
                                    <input nz-input formControlName="port" placeholder="Host Port" />
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost)">
                                <nz-form-control [nzSpan]="12" [nzOffset]="7">
                                    <label nz-checkbox formControlName="isForward" [nzDisabled]="hostCfg.isGroup(parentHost)">Forwarding</label>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost) && !validateForm.get( 'isForward')?.value">
                                <nz-form-label [nzSpan]="7" nzRequired>User</nz-form-label>
                                <nz-form-control [nzSpan]="12" nzHasFeedback>
                                    <input nz-input formControlName="user" placeholder="User" />
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost) && !validateForm.get( 'isForward')?.value">
                                <nz-form-label [nzSpan]="7" nzRequired>Password</nz-form-label>
                                <nz-form-control [nzSpan]="12" nzHasFeedback>
                                    <nz-input-group [nzSuffix]="suffixTemplate">
                                        <input nz-input formControlName="pass" [type]="passwordVisible ? 'text' : 'password'" placeholder="Password" />
                                    </nz-input-group>
                                    <ng-template #suffixTemplate>
                                        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' :'eye'" (click)="passwordVisible = !passwordVisible"></i>
                                    </ng-template>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost) && !validateForm.get( 'isForward')?.value">
                                <nz-form-label [nzSpan]="7">WinForward</nz-form-label>
                                <nz-form-control [nzSpan]="12">
                                    <nz-select nzAllowClear [nzDisabled]="hostCfg.isHost(parentHost)" formControlName="winForward">
                                        <nz-option *ngFor='let item of winForwardList; let i=index' [nzValue]="item.winip+':'+item.winport" [nzLabel]="item.winip+':'+item.winport"></nz-option>
                                    </nz-select>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost) && !validateForm.get( 'isForward')?.value">
                                <nz-form-label [nzSpan]="7">Scripts</nz-form-label>
                                <nz-form-control [nzSpan]="12">
                                    <textarea nz-input formControlName="script" placeholder="!!sleep n!!" [nzAutosize]="{minRows:2, maxRows:4}"></textarea>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost) && validateForm.get( 'isForward')?.value">
                                <nz-form-label [nzSpan]="7" nzRequired>LocalPort</nz-form-label>
                                <nz-form-control [nzSpan]="12" nzHasFeedback>
                                    <input nz-input formControlName="localPort" placeholder="Local Port" />
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item *ngIf="hostCfg.isHost(editHost) && validateForm.get( 'isForward')?.value">
                                <nz-form-label [nzSpan]="7">URL</nz-form-label>
                                <nz-form-control [nzSpan]="12">
                                    <input nz-input formControlName="url" placeholder="https://$IP/xxxx" />
                                </nz-form-control>
                            </nz-form-item>
                        </form>
                    </ng-container>
                    <ng-template #footerTpl>
                        <div style="float: right">
                            <button nz-button nzType="primary" (click)="saveEditDrawer()"><i nz-icon nzType='save'></i>Save</button>
                        </div>
                    </ng-template>
                </nz-drawer>
            </div>
        </div>
    </as-split-area>
</as-split>